<template>
  <el-image-viewer
    v-if="show"
    v-bind="$attrs"
    hide-on-click-modal
    @close="show = false"
  />
</template>

<script setup>
import { ref, watch } from "vue";
import { ElImageViewer } from "element-plus"; //自定义函数组件无法使用全局组件，需要单独引入
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  remove: {
    type: Function, //传入createApp中移除节点的方法
    default: null,
  },
  // api文档：https://element-plus.org/zh-CN/component/image.html#image-viewer-attributes
});

const show = ref(props.visible);
// 监听显示的消失，需要移除dom
watch(
  () => show.value,
  (val) => {
    !val && props.remove();
  }
);
</script>
